/* global-styles.scss */

// 自定义全局变量
$primary-color: #07c160; // 主色调
$secondary-color: #333; // 次级颜色
$background-color: #f8f8f8; // 页面背景色
$text-color: #666; // 默认文字颜色
$border-color: #eaeaea; // 边框颜色

// 重写 Wot Design Uni 的主题变量
:root {
  --wd-primary-color: $primary-color;
  --wd-secondary-color: $secondary-color;
  --wd-background-color: $background-color;
  --wd-text-color: $text-color;
  --wd-border-color: $border-color;
}

// 页面全局样式
page {
  background-color: var(--wd-background-color);
  color: var(--wd-text-color);
  font-family: "Arial", sans-serif;
}

// 通用样式规则
.container {
  padding: 20px;
  margin: 0 auto;
  max-width: 1200px;
}

// 按钮样式覆盖
.wd-button {
  border-radius: 5px;
  font-weight: bold;

  &:hover {
    opacity: 0.8;
  }
}

// 表单样式
.wd-form-item {
  margin-bottom: 15px;
}

// 弹框样式
.wd-toast {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
}

// 自定义组件样式
.custom-header {
  background-color: var(--wd-primary-color);
  color: #fff;
  padding: 10px;
  text-align: center;
}

.custom-footer {
  background-color: var(--wd-secondary-color);
  color: #fff;
  padding: 10px;
  text-align: center;
}